<template>
  <div class="musicsView" @click="$emit('change-musics-list',keys)">
    <div class="textBox">
      <div>
        <span class="text1">{{ keys.name }}</span>
        <span v-if="isShow" class="text2">({{ keys.song.alias }})</span>
      </div>
      <div class="text3">
        <span v-for="item in keys.song.artists" :key="item.id">
          {{ item.name }}/
        </span>
    &nbsp;-{{ keys.song.album.name }}
      </div>
    </div>

    <div v-show="!isShows" class="bofang">▶
    </div>
    <div v-show="isShows" :class="{ paused: paused }" class="bofangs">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    keys: Object,
    paused: Boolean,
    isShows: Boolean,
  },
  computed: {
    isShow() {
      return this.keys.song.alias == "" ? false : true;
    },
  },
};
</script>

<style lang="scss" scoped>
@keyframes playing {
  from {
    transform: scaleY(1);
  }

  to {
    transform: scaleY(0.2);

  }
}
.bofangs{
  display: flex;
  margin-left: 25rem;
  margin-top: 5px;
  &.paused {
    div {
        animation-play-state: paused;
      }
    }
  div{
    width: 4rem;
    height: 30rem;
    margin-left:5rem ;
    background-color:red;
    animation: playing .3s linear infinite alternate;

    &:nth-child(1) {
        animation-delay: -0.3s;
      }

      &:nth-child(2) {
        animation-delay: -0.2s;
      }
      &:nth-child(3) {
        animation-delay: -0.1s;
      }
  }

}
body {
  margin: 0;
  padding: 0;
}
.musicsView {
  width: 375rem;
  height: 48rem;
  display: flex;
  border-bottom: 1rem solid #f4f4f4;
  padding-top: 10rem;
  
}
.textBox{
  width:300rem;
  padding-left: 10rem;
  text-align: left;

}
.textBox>div{
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.text1 {
  color: rgb(51, 51, 51);
  font-size: 17rem;
}
.text2 {
  color: rgb(136, 136, 136);
  font-size: 17rem;
}
.bofang {
  width: 25rem;
  height: 25rem;
  border: 1rem solid #8a8787;
  border-radius: 15rem;
  color: #8a8787;
  text-align: center;
  line-height: 26rem;
  font-size: 12rem;
  margin-top: 5rem;
  margin-left: 30rem;
}
.text3{
  color: rgb(136, 136, 136);
  font-size: 12rem;
  margin-top: 7rem;
}
</style>
